<style>
    .profile-avatar-container {
        position: relative;
        width: 100px;
    }

    .profile-avatar-container .profile-user-img {
        width: 100px;
        height: 100px;
    }

    .profile-avatar-container .profile-avatar-text {
        display: none;
    }

    .profile-avatar-container:hover .profile-avatar-text {
        display: block;
        position: absolute;
        height: 100px;
        width: 100px;
        background: #444;
        opacity: .6;
        color: #fff;
        top: 0;
        left: 0;
        line-height: 100px;
        text-align: center;
    }

    .profile-avatar-container button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        opacity: 0;
    }
</style>
<div id="content-container" class="container">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h2 class="page-header">{:__('Identification')}</h2>
                    <form id="profile-form" class="form-horizontal" role="form" data-toggle="validator" method="POST"
                          action="{:url('/addons/cardocr/index')}">
                        {:token()}

                        {switch name="status"}
                        {case value="null"}
                        <div class="alert alert-info">

                            <strong>申请审核身份证!</strong>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>
                            <div class="col-xs-12 col-sm-4">
                                <input type="text" class="form-control" id="username" name="username"
                                       value="{$name|htmlentities}"
                                       data-rule="required;xingming;"
                                       data-rule-xingming="[/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/, '请输入合法名字']"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('IdCard')}:</label>
                            <div class="col-xs-12 col-sm-4">
                                <input type="text" class="form-control" id="idnum" name="idnum"
                                       value="{$idnum|htmlentities}"
                                       data-rule="required;IDcard;remote({:url('cardocr/checkidcardavailable')}, id={$user.id})"
                                       placeholder="">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="c-image" class="control-label col-xs-12 col-sm-2">{:__('positive-img')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <div class="input-group">
                                    <input id="c-image" class="form-control hidden" size="50" name="positive_img" type="text"
                                           value="{$positive_img|default=''|htmlentities}" data-rule="required;">
                                    <div class="group-addon no-border no-padding">
                                        <span><button type="button" id="plupload-image" class="btn btn-danger plupload"
                                                      data-input-id="c-image" data-style="thumb"
                                                      data-mimetype="image/jpeg,image/png,image/jpg"
                                                      data-multiple="false" data-maxsize="3M" data-preview-id="p-image"><i
                                                class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                        <span class="msg-box n-right" for="c-image"></span>
                                    </div>
                                </div>
                                <ul class="row list-inline plupload-preview" id="p-image"></ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="c-image" class="control-label col-xs-12 col-sm-2">{:__('back-img')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <div class="input-group">
                                    <input id="c-back-img" class="form-control hidden" size="50" name="back_img" type="text"
                                           value="{$back_img|default=''|htmlentities}" data-rule="required;">
                                    <div class="group-addon no-border no-padding">
                                        <span><button type="button" id="plupload-back-img"
                                                      class="btn btn-danger plupload" data-input-id="c-back-img"
                                                      data-style="thumb" data-mimetype="image/jpeg,image/png,image/jpg"
                                                      data-multiple="false" data-maxsize="3M"
                                                      data-preview-id="p-back-img"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                        <span class="msg-box n-right" for="c-back-img"></span>
                                    </div>
                                </div>
                                <ul class="row list-inline plupload-preview" id="p-back-img"></ul>
                            </div>
                        </div>
                        <div class="form-group normal-footer">
                            <label class="control-label col-xs-12 col-sm-2"></label>
                            <div class="col-xs-12 col-sm-8">
                                <button type="submit" class="btn btn-success btn-embossed disabled">{:__('Ok')}</button>
                                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                            </div>
                        </div>

                        {/case}

                        {case value="0"}

                        <div class="alert alert-warning">

                            <strong>拒绝审核身份证!</strong>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>
                            <div class="col-xs-12 col-sm-4">
                                <input type="text" class="form-control" id="username" name="username"
                                       value="{$name|htmlentities}"
                                       data-rule="required;xingming;"
                                       data-rule-xingming="[/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/, '请输入合法名字']"
                                       placeholder="" disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('IdCard')}:</label>
                            <div class="col-xs-12 col-sm-4">
                                <input type="text" class="form-control" id="idnum" name="idnum"
                                       value="{$idnum|htmlentities}"
                                       data-rule="required;IDcard;remote({:url('cardocr/checkidcardavailable')}, id={$user.id})"
                                       placeholder="" disabled="disabled">
                            </div>
                        </div>

                        {/case}


                        {case value="1"}
                        <div class="alert alert-success">

                            <strong>已经审核身份证!</strong>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>
                            <div class="col-xs-12 col-sm-4">
                                <input type="text" class="form-control" id="username" name="username"
                                       value="{$name|htmlentities}"
                                       data-rule="required;xingming;"
                                       data-rule-xingming="[/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/, '请输入合法名字']"
                                       placeholder="" disabled="disabled" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('IdCard')}:</label>
                            <div class="col-xs-12 col-sm-4">
                                <input type="text" class="form-control" id="idnum" name="idnum"
                                       value="{$idnum|htmlentities}"
                                       data-rule="required;IDcard;remote({:url('cardocr/checkidcardavailable')}, id={$user.id})"
                                       placeholder=""  disabled="disabled">
                            </div>
                        </div>

                        {/case}


                        {case value="2"}
                        <div class="alert alert-info">

                            <strong>等待审核身份证!</strong>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>
                            <div class="col-xs-12 col-sm-4">
                                <input type="text" class="form-control" id="username" name="username"
                                       value="{$name|htmlentities}"
                                       data-rule="required;xingming;"
                                       data-rule-xingming="[/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/, '请输入合法名字']"
                                       placeholder=""  disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('IdCard')}:</label>
                            <div class="col-xs-12 col-sm-4">
                                <input type="text" class="form-control" id="idnum" name="idnum"
                                       value="{$idnum|htmlentities}"
                                       data-rule="required;IDcard;remote({:url('cardocr/checkidcardavailable')}, id={$user.id})"
                                       placeholder=""  disabled="disabled">
                            </div>
                        </div>



                        {/case}



                        {default /}

                        {/switch}

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<style>
    .form-layer {
        height: 100%;
        min-height: 150px;
        min-width: 300px;
    }

    .form-body {
        width: 100%;
        overflow: auto;
        top: 0;
        position: absolute;
        z-index: 10;
        bottom: 50px;
        padding: 15px;
    }

    .form-layer .form-footer {
        height: 50px;
        line-height: 50px;
        background-color: #ecf0f1;
        width: 100%;
        position: absolute;
        z-index: 200;
        bottom: 0;
        margin: 0;
    }

    .form-footer .form-group {
        margin-left: 0;
        margin-right: 0;
    }
</style>